<template>
    <Form
        class="declare-form"
        ref="form"
        :model="form"
        :rules="formRules"
        :show-message="false"
        v-blur="blurEvent"
        v-focusJump="{
            onEnter: enterEvent,
            onLast: handleLastEnter
        }"
    >
        <Row>
            <iCol class="form-label" span="8">关联报关单</iCol>
            <iCol span="16">
                <FormItem class="formInput" prop="relEntryId" :error="tips.relEntryId">
                    <Input
                        name="relEntryId"
                        :disabled="disabled"
                        v-model="form.relEntryId"
                        :title="tips.relEntryId"
                        :maxlength="18"
                    ></Input>
                </FormItem>
            </iCol>
        </Row>
        <Row>
            <iCol class="form-label" span="8">关联备案</iCol>
            <iCol span="16">
                <FormItem class="formInput">
                    <Input
                        name="relManNo"
                        :disabled="disabled"
                        v-model="form.relManNo"
                        :maxlength="12"
                    ></Input>
                </FormItem>
            </iCol>
        </Row>
        <Row>
            <iCol class="form-label" span="8">保税/监管场地</iCol>
            <iCol span="16">
                <FormItem class="formInput">
                    <!-- <Input
                        name="bonNo"
                        :disabled="disabled"
                        :maxlength="32"
                    ></Input>-->
                    <Select v-model="form.bonNo" class="small-select" :disabled="disabled" name="bonNo">
                        <Option value="海关保税场所">海关保税场所</Option>
                        <Option value="海关特殊监管区域">海关特殊监管区域</Option>
                        <Option value="其他海关监管场所">其他海关监管场所</Option>
                    </Select>
                </FormItem>
            </iCol>
        </Row>
        <Row>
            <iCol class="form-label" span="8">场地代码</iCol>
            <iCol span="16">
                <FormItem class="formInput" prop="cusFie" :error="tips.cusFie">
                    <Input
                        name="cusFie"
                        :disabled="disabled"
                        v-model="form.cusFie"
                        :maxlength="4"
                        :title="tips.cusFie"
                    ></Input>
                </FormItem>
            </iCol>
        </Row>
    </Form>
</template>

<script>
import { formRules, formMethods } from '@/mixins/form/form'
import eventMixin from '@/mixins/form/event'

export default {
    mixins: [
        eventMixin,
        formRules,
        formMethods
    ],
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        // 随附单证代码选项
        supervisionList: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data () {
        return {
            form: {
                relEntryId: '', // 报关报检单id,
                relManNo: '', // 报关单随附单证id,
                bonNo: '', // 序号
                cusFie: '' // 单证编号,
            },
            tips: {
                relEntryId: '', // 报关报检单id,
                relManNo: '', // 报关单随附单证id,
                bonNo: '', // 序号
                cusFie: '' // 单证编号,
            }
        }
    }
}
</script>
<style scoped>
.small-select{
    height: 20px;
    line-height: 20px;
    border-radius:0 0 ;
}
.small-select input{
    border-radius:0 0 ;
}

</style>
